<template>
  <div class="food-content-box restaurant-list-box">
    <el-breadcrumb separator="/" class="page-title">
      <el-breadcrumb-item>Schedule</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container-padding">
      <el-form :inline="true" label-position="top" :model="searchForm" size="mini" ref="searchForm"
               class="form-min-width">
        <div class="container-box label-style">
          <el-row :gutter="20">
            <el-col>
              <!--<el-form-item label="Direction name en">-->
                <!--<el-select @change="onTrainScheduleRoute" style="width: 200px" v-model="searchForm.directionId" placeholder="">-->
                  <!--<el-option v-for="rg in directionNameEns" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>-->
                <!--</el-select>-->
              <!--</el-form-item>-->

              <el-form-item label="Route name_en">
                <el-select @change="onTrainScheduleSchedule" style="width: 200px" v-model="searchForm.routeId"
                           placeholder="" clearable>
                  <el-option v-for="rg in routeJson" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="Schedule">
                <el-select style="width: 200px"
                           v-model="searchForm.scheduleId"
                           placeholder="" clearable>
                  <el-option v-for="rg in scheduleJson" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="Station name_en">
                <el-select style="width: 200px" v-model="searchForm.stationId" placeholder="" clearable>
                  <el-option v-for="rg in stationJson" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
                </el-select>
              </el-form-item>

              <span style="display:inline-block;margin-top:36px;">
                <el-button type="warning" @click="getList" size="small">{{$t('m.Search')}}</el-button>
                <el-button @click="$router.push('/scheduleUploadExcel')" size="small">Upload schedule</el-button>
              </span>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <!--表格-->
      <el-table
        :data="tableData"
        v-loading="tableLoading"
        border
        style="width: 100%;margin-top:20px;">

        <!--&lt;!&ndash;Direction Name_en&ndash;&gt;-->
        <!--<el-table-column-->
          <!--prop="directionName"-->
          <!--label="Direction Name_en"-->
          <!--align="center"-->
          <!--min-width="160">-->
        <!--</el-table-column>-->

        <!--Route name_en-->
        <el-table-column
          prop="routeName"
          label="Route name_en"
          align="center"
          min-width="120">
        </el-table-column>

        <!--Schedule-->
        <el-table-column
          prop="schedule"
          label="Schedule"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <div class="list-notes">{{getTime(scope.row.schedule)}}</div>
          </template>
        </el-table-column>

        <!--Station name_en-->
        <el-table-column
          prop="stationName"
          label="Station name_en"
          align="center"
          min-width="120">
        </el-table-column>

        <!--Arrival time-->
        <el-table-column
          prop="arrivalTime"
          label="Arrival time"
          align="center"
          min-width="160">
          <template slot-scope="scope">
            <div class="list-notes">{{getTime(scope.row.arrivalTime)}}</div>
          </template>
        </el-table-column>


        <!--Departure time-->
        <el-table-column
          prop="departureTime"
          label="Departure time"
          align="center"
          min-width="160">
          <template slot-scope="scope">
            <div class="list-notes">{{getTime(scope.row.departureTime)}}</div>
          </template>
        </el-table-column>

        <!--Train name-->
        <el-table-column
          prop="trainName"
          label="Train name"
          align="center"
          min-width="120">
        </el-table-column>

        <!--End Station_en-->
        <el-table-column
          prop="endStationEn"
          label="End Station_en"
          align="center"
          min-width="140">
        </el-table-column>

        <!--End Station_mm-->
        <el-table-column
          prop="endStationMm"
          label="End Station_mm"
          align="center"
          min-width="140">
        </el-table-column>

      </el-table>

      <!--分页-->
      <div class="block" style="margin-top: 15px;text-align: center;">
        <el-pagination
          @size-change="handleChangeSize"
          @current-change="handleChangePage"
          :current-page="pageData.pageNo"
          :page-size="pageData.pageSize"
          :page-sizes="[10, 20, 50, 100, 500]"
          :page-count="pageInfo.totalPages"
          :total="pageInfo.totalCount"
          layout="total, prev, pager, next, jumper, sizes">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    trainScheduleList,
    trainScheduleRoute,
    trainScheduleSchedule,
    trainScheduleStation
  } from '../../../api/zxy_api'
  import { onTrainDirectionQueryJson } from '../../../api/mgc_api'

  export default {
    name: 'schedule',
    data() {
      return {
        fileList: [],
        loading: null,
        directionNameEns: [],
        routeJson: [],
        stationJson: [],
        scheduleJson: [],
        searchForm: {
          // 表单数据必填字段
          routeId: '',
          scheduleId: '',
          stationId: '',
          directionId: null,
        },
        tableData: [],
        pageData: {
          pageNum: 1,
          pageSize: 20,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        tableLoading: false,
      }
    },
    methods: {
      handleChangeSize(val) {
        this.pageData.pageSize = parseInt(val)
        this.pageData.pageNum = 1
        this.getList()
      },
      handleChangePage(val) {
        this.pageData.pageNum = val
        this.getList()
      },
      getTime(value) {
        if (!value) {
          return ''
        }
        let t = value.substring(0,value.length - 3)
        return t
      },
      getDate(value) {
        if (!value) {
          return ''
        }
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        var ts = H + ':' + i
        return ts
      },
      // onTrainDirection() {
      //   onTrainDirectionQueryJson().then((res) => {
      //     let data = res.data;
      //
      //     // 下拉菜单数据装载
      //
      //     this.directionNameEns = [];
      //
      //     for (let i = 0; i < data.length; i++) {
      //       this.directionNameEns.push({
      //         value: data[i].id,
      //         text: data[i].nameEn
      //       })
      //     }
      //
      //   }).catch((e) => {
      //     console.log(e)
      //   })
      // },
      onTrainScheduleRoute() {
        trainScheduleRoute({directionId: this.searchForm.directionId}).then((res) => {
          let data = res.data;

          // 下拉菜单数据装载

          this.routeJson = [];
          this.searchForm.routeId = '';

          for (let i = 0; i < data.length; i++) {
            this.routeJson.push({
              value: data[i].id,
              text: data[i].nameEn
            })
          }

        }).catch((e) => {
          console.log(e)
        })
      },
      onTrainScheduleSchedule() {
        trainScheduleSchedule({routeId: this.searchForm.routeId}).then((res) => {
          let data = res.data;

          // 下拉菜单数据装载
          this.scheduleJson = [];

          for (let i = 0; i < data.length; i++) {
            this.scheduleJson.push({
              value: data[i].id,
              text: this.getTime(data[i].schedule)
            })
          }

          if (!this.scheduleJson.length > 0) {
            this.searchForm.scheduleId = null;
          }

        }).catch((e) => {
          console.log(e)
        })
      },
      onTrainScheduleStation() {
        trainScheduleStation().then((res) => {
          let data = res.data;

          // 下拉菜单数据装载

          this.stationJson = [];

          for (let i = 0; i < data.length; i++) {
            this.stationJson.push({
              value: data[i].id,
              text: data[i].nameEn
            })
          }

          if (!this.stationJson.length > 0) {
            this.searchForm.stationId = null;
          }

        }).catch((e) => {
          console.log(e)
        })
      },
      getList() {
        this.tableLoading = true
        trainScheduleList(Object.assign(this.searchForm, this.pageData)).then((res) => {

          let data = res
          this.tableData = data.data.list

          // 分页信息配置
          this.pageInfo.totalPages = data.data.pages
          this.pageInfo.totalCount = data.data.total

          // 清除loading 状态
          setTimeout(() => {
            this.tableLoading = false
          }, 400)
        })
          .catch((error) => {
            // this.showToast(error.errorID)
            setTimeout(() => {
              this.tableLoading = false
            }, 400)
          })
      },
    },
    mounted() {
      this.getList()
      this.onTrainScheduleRoute();
      // this.onTrainDirection()
      this.onTrainScheduleStation();
    }
  }
</script>
<style scoped>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .food-content-box .container-padding {
    padding: 20px 40px 0 40px;
  }

  .list-notes {
    text-align: center;
    display: block;
  }
</style>
